νλ‘ νΈμλ μ±λ₯ APIλ₯Ό νμ©νμ¬ νμ΄μ§ λ‘λ λ©νΈλ¦μ μμ§ λ° λΆμνκ³ , κΈλ‘λ² μ¬μ©μλ₯Ό μν μΉμ¬μ΄νΈ μ±λ₯μ κ°μ νλ μ’ ν© κ°μ΄λμ λλ€.
νλ‘ νΈμλ μ±λ₯ API νμ: νμ΄μ§ λ‘λ λ©νΈλ¦ μμ§ λ§μ€ν°νκΈ°
μ€λλ μ λμ§νΈ νκ²½μμ μΉμ¬μ΄νΈ μ±λ₯μ λ§€μ° μ€μν©λλ€. λλ¦¬κ² λ‘λλλ μΉμ¬μ΄νΈλ μ¬μ©μμ λΆλ§, μ₯λ°κ΅¬λ μ΄ν, κ·Έλ¦¬κ³ κΆκ·Ήμ μΌλ‘λ μμ΅ μμ€λ‘ μ΄μ΄μ§ μ μμ΅λλ€. νλ‘ νΈμλ μ±λ₯μ μ΅μ ννλ κ²μ μ μΈκ³ μ΄λμ μλ κΈμ μ μΈ μ¬μ©μ κ²½νμ μ 곡νλ λ° λ§€μ° μ€μν©λλ€. νλ‘ νΈμλ μ±λ₯ APIλ νμ΄μ§ λ‘λ μ±λ₯μ λ€μν μΈ‘λ©΄μ μΈ‘μ νκ³ λΆμνκΈ° μν κ°λ ₯ν λꡬλ₯Ό μ 곡ν©λλ€. μ΄ μ’ ν© κ°μ΄λλ Navigation Timing API λ° κΈ°ν κ΄λ ¨ μ±λ₯ μΈν°νμ΄μ€λ₯Ό νμ©νμ¬ ν΅μ¬ νμ΄μ§ λ‘λ λ©νΈλ¦μ μμ§νκ³ μ΄ν΄νλ λ°©λ²μ μλ΄νμ¬, λ³λͺ© νμμ μλ³νκ³ κΈλ‘λ² μ¬μ©μλ₯Ό μν΄ μΉμ¬μ΄νΈμ μλμ λ°μμ±μ κ°μ ν μ μλλ‘ μ§μν©λλ€.
νμ΄μ§ λ‘λ λ©νΈλ¦μ μ€μμ± μ΄ν΄νκΈ°
νμ΄μ§ λ‘λ λ©νΈλ¦μ μΉμ¬μ΄νΈκ° μΌλ§λ 빨리 λ‘λλκ³ μ¬μ©μμ μνΈμμ©ν μ μκ² λλμ§μ λν κ·μ€ν ν΅μ°°λ ₯μ μ 곡ν©λλ€. μ΄λ¬ν λ©νΈλ¦μ μ¬λ¬ κ°μ§ μ΄μ λ‘ μ€μν©λλ€:
- μ¬μ©μ κ²½ν: λ λΉ λ₯Έ λ‘λ© μλμ μΉμ¬μ΄νΈλ λ λΆλλ½κ³ μ¦κ±°μ΄ μ¬μ©μ κ²½νμ μ 곡νμ¬ μ°Έμ¬λμ λ§μ‘±λλ₯Ό λμ λλ€. λμΏμ μλ μ¬μ©μκ° μ¬λ¬λΆμ μ μμκ±°λ μ¬μ΄νΈμ μ μνλ €κ³ ν λ, λλ¦° λ‘λ© κ²½νμ κ·Έλ€μ΄ ꡬ맀λ₯Ό ν¬κΈ°νκ² λ κ°λ₯μ±μ΄ λμ΅λλ€.
- SEO μμ: ꡬκΈκ³Ό κ°μ κ²μ μμ§μ νμ΄μ§ μλλ₯Ό μμ κ²°μ μμΈμΌλ‘ κ³ λ €ν©λλ€. μΉμ¬μ΄νΈ μ±λ₯μ μ΅μ ννλ©΄ κ²μ μμ§ κ°μμ±μ ν₯μμν¬ μ μμ΅λλ€.
- μ νμ¨: μ°κ΅¬μ λ°λ₯΄λ©΄ νμ΄μ§ λ‘λ μκ°κ³Ό μ νμ¨ μ¬μ΄μλ μ§μ μ μΈ μκ΄κ΄κ³κ° μμ΅λλ€. λ λΉ λ₯Έ λ‘λ© νμ΄μ§λ νΉν μΈν°λ· μλκ° λλ¦° μ§μμμ λ λμ μ νμ¨λ‘ μ΄μ΄μ§λ κ²½μ°κ° λ§μ΅λλ€.
- λͺ¨λ°μΌ μ΅μ ν: λͺ¨λ°μΌ κΈ°κΈ° μ¬μ©μ΄ μ¦κ°ν¨μ λ°λΌ λͺ¨λ°μΌ μ±λ₯ μ΅μ νλ νμμ μ λλ€. νμ΄μ§ λ‘λ μκ°μ νΉν λμνμ΄ μ νλ μ§μμμ λͺ¨λ°μΌ μ¬μ©μ κ²½νμ ν° μν₯μ λ―ΈμΉ μ μμ΅λλ€. μλ₯Ό λ€μ΄, 3G μ°κ²°μ μμ‘΄νλ μΈλμ μ¬μ©μλ κ³ μ κ΄μ¬μ μ°κ²°μ κ°μ§ μ¬μ©μλ³΄λ€ λΉ λ₯΄κ² λ‘λλλ μΉμ¬μ΄νΈλ₯Ό λ λμ΄ νκ°ν κ²μ λλ€.
- κΈλ‘λ² λλ¬ λ²μ: μ±λ₯μ μ¬μ©μμ μ§λ¦¬μ μμΉ, λ€νΈμν¬ μ‘°κ±΄ λ° κΈ°κΈ° κΈ°λ₯μ λ°λΌ ν¬κ² λ¬λΌμ§ μ μμ΅λλ€. μ¬λ¬ μ§μμ μ±λ₯μ λͺ¨λν°λ§νλ©΄ μ΅μ νκ° νμν μμμ μλ³νλ λ° λμμ΄ λ μ μμ΅λλ€.
νλ‘ νΈμλ μ±λ₯ API μκ°
νλ‘ νΈμλ μ±λ₯ APIλ μΉ νμ΄μ§μ μ±λ₯ κ΄λ ¨ λ°μ΄ν°μ λν μ κ·Όμ μ 곡νλ μλ°μ€ν¬λ¦½νΈ μΈν°νμ΄μ€ λͺ¨μμ λλ€. μ΄ APIλ₯Ό ν΅ν΄ κ°λ°μλ νμ΄μ§ λ‘λ μκ°, 리μμ€ λ‘λ© λ° κΈ°ν μ±λ₯ νΉμ±μ λ€μν μΈ‘λ©΄μ μΈ‘μ ν μ μμ΅λλ€. νλ‘ νΈμλ μ±λ₯ APIμ ν΅μ¬ κ΅¬μ± μμμΈ Navigation Timing APIλ νμ΄μ§ λ‘λ νλ‘μΈμ€μ λ€μν λ¨κ³μ λν μμΈν νμ΄λ° μ 보λ₯Ό μ 곡ν©λλ€.
μ±λ₯ APIμ μ£Όμ κ΅¬μ± μμ:
- Navigation Timing API: DNS μ‘°ν, TCP μ°κ²°, μμ² λ° μλ΅ μκ°, DOM μ²λ¦¬μ κ°μ νμ΄μ§ λ‘λ νλ‘μΈμ€μ μ¬λ¬ λ¨κ³μ λν νμ΄λ° μ 보λ₯Ό μ 곡ν©λλ€.
- Resource Timing API: μ΄λ―Έμ§, μ€ν¬λ¦½νΈ, μ€νμΌμνΈμ κ°μ΄ νμ΄μ§μμ λ‘λν κ°λ³ 리μμ€μ λν νμ΄λ° μ 보λ₯Ό μ 곡ν©λλ€. μ΄λ νΉν κΈ°κΈ° λ° μ§μμ λ°λΌ λ€λ₯Έ μ΄λ―Έμ§ ν΄μλλ₯Ό μ 곡ν λ(μ: λ λμ μμΆμ μν΄ μ§μλλ λΈλΌμ°μ μ WebP μ΄λ―Έμ§ μ 곡) μ΄λ€ μμ°μ΄ λ‘λ μκ°μ κ°μ₯ λ§μ΄ κΈ°μ¬νλμ§ μ΄ν΄νλ λ° λ§€μ° μ€μν©λλ€.
- User Timing API: κ°λ°μκ° μ¬μ©μ μ μ μ±λ₯ λ©νΈλ¦μ μ μνκ³ μ½λμ νΉμ μ§μ μ νμνμ¬ μ€ν μκ°μ μΈ‘μ ν μ μλλ‘ ν©λλ€.
- Paint Timing API: First Paint(FP) λ° First Contentful Paint(FCP)μ κ°μ΄ νλ©΄μ μ½ν μΈ λ₯Ό λ λλ§νλ κ²κ³Ό κ΄λ ¨λ λ©νΈλ¦μ μ 곡ν©λλ€.
- Largest Contentful Paint (LCP): νμ΄μ§κ° μ²μ λ‘λλκΈ° μμν μμ μ κΈ°μ€μΌλ‘ λ·°ν¬νΈ λ΄μ 보μ΄λ κ°μ₯ ν° μ΄λ―Έμ§ λλ ν μ€νΈ λΈλ‘μ λ λλ§ μκ°μ λ³΄κ³ ν©λλ€. μ΄λ ꡬκΈμ μ½μ΄ μΉ λ°μ΄ν(Core Web Vitals)μ ν΅μ¬ λ©νΈλ¦μ λλ€.
- First Input Delay (FID): μ¬μ©μκ° νμ΄μ§μ μ²μ μνΈμμ©(μ: λ§ν¬ ν΄λ¦, λ²νΌ ν λλ μλ°μ€ν¬λ¦½νΈ κΈ°λ°μ μ¬μ©μ μ μ 컨νΈλ‘€ μ¬μ©)ν μμ λΆν° λΈλΌμ°μ κ° ν΄λΉ μνΈμμ©μ λν μ΄λ²€νΈ νΈλ€λ¬ μ²λ¦¬λ₯Ό μ€μ λ‘ μμν μ μμ λκΉμ§μ μκ°μ μΈ‘μ ν©λλ€.
- Cumulative Layout Shift (CLS): νμ΄μ§μ μ 체 μλͺ λμ λ°μνλ λͺ¨λ μκΈ°μΉ μμ λ μ΄μμ μ΄λμ μ΄ν©μ μΈ‘μ ν©λλ€.
Navigation Timing APIλ‘ νμ΄μ§ λ‘λ λ©νΈλ¦ μμ§νκΈ°
Navigation Timing APIλ νμ΄μ§ λ‘λ νλ‘μΈμ€μ λν νλΆν μ 보λ₯Ό μ 곡ν©λλ€. μ΄ λ°μ΄ν°μ μ κ·Όνλ €λ©΄ μλ°μ€ν¬λ¦½νΈμμ performance.timing μμ±μ μ¬μ©ν μ μμ΅λλ€.
μμ : Navigation Timing λ°μ΄ν° μμ§
λ€μμ Navigation Timing λ°μ΄ν°λ₯Ό μμ§νμ¬ μ½μμ κΈ°λ‘νλ λ°©λ²μ μμ λλ€:
if (window.performance && window.performance.timing) {
const timing = window.performance.timing;
console.log('Navigation Start:', timing.navigationStart);
console.log('Fetch Start:', timing.fetchStart);
console.log('Domain Lookup Start:', timing.domainLookupStart);
console.log('Domain Lookup End:', timing.domainLookupEnd);
console.log('Connect Start:', timing.connectStart);
console.log('Connect End:', timing.connectEnd);
console.log('Request Start:', timing.requestStart);
console.log('Response Start:', timing.responseStart);
console.log('Response End:', timing.responseEnd);
console.log('DOM Loading:', timing.domLoading);
console.log('DOM Interactive:', timing.domInteractive);
console.log('DOM Complete:', timing.domComplete);
console.log('Load Event Start:', timing.loadEventStart);
console.log('Load Event End:', timing.loadEventEnd);
}
μ€μ: performance.timing κ°μ²΄λ PerformanceNavigationTiming μΈν°νμ΄μ€λ₯Ό μν΄ λ μ΄μ μ¬μ©λμ§ μμ΅λλ€(deprecated). μ΅μ λΈλΌμ°μ μμλ νμλ₯Ό μ¬μ©νλ κ²μ΄ κΆμ₯λ©λλ€.
PerformanceNavigationTiming μ¬μ©νκΈ°
if (window.performance && window.performance.getEntriesByType) {
const navigationEntries = performance.getEntriesByType('navigation');
if (navigationEntries && navigationEntries.length > 0) {
const navigationEntry = navigationEntries[0];
console.log('Navigation Type:', navigationEntry.type); // e.g., 'navigate', 'reload', 'back_forward'
console.log('Navigation Start:', navigationEntry.startTime);
console.log('Fetch Start:', navigationEntry.fetchStart);
console.log('Domain Lookup Start:', navigationEntry.domainLookupStart);
console.log('Domain Lookup End:', navigationEntry.domainLookupEnd);
console.log('Connect Start:', navigationEntry.connectStart);
console.log('Connect End:', navigationEntry.connectEnd);
console.log('Request Start:', navigationEntry.requestStart);
console.log('Response Start:', navigationEntry.responseStart);
console.log('Response End:', navigationEntry.responseEnd);
console.log('DOM Interactive:', navigationEntry.domInteractive);
console.log('DOM Complete:', navigationEntry.domComplete);
console.log('Load Event Start:', navigationEntry.loadEventStart);
console.log('Load Event End:', navigationEntry.loadEventEnd);
console.log('Duration:', navigationEntry.duration);
// Calculate Time to First Byte (TTFB)
const ttfb = navigationEntry.responseStart - navigationEntry.requestStart;
console.log('TTFB:', ttfb);
// Calculate DOM Load Time
const domLoadTime = navigationEntry.domComplete - navigationEntry.domLoading;
console.log('DOM Load Time:', domLoadTime);
// Calculate Page Load Time
const pageLoadTime = navigationEntry.loadEventEnd - navigationEntry.startTime;
console.log('Page Load Time:', pageLoadTime);
}
}
Navigation Timing λ©νΈλ¦ μ΄ν΄νκΈ°
λ€μμ Navigation Timing APIμμ μ 곡νλ λͺ κ°μ§ μ£Όμ λ©νΈλ¦μ λν μ€λͺ μ λλ€:
- navigationStart: λ¬Έμλ‘μ λ΄λΉκ²μ΄μ μ΄ μμλλ μκ°μ λλ€.
- fetchStart: λΈλΌμ°μ κ° λ¬Έμ κ°μ Έμ€κΈ°λ₯Ό μμνλ μκ°μ λλ€.
- domainLookupStart: λΈλΌμ°μ κ° λ¬Έμ λλ©μΈμ λν DNS μ‘°νλ₯Ό μμνλ μκ°μ λλ€.
- domainLookupEnd: λΈλΌμ°μ κ° λ¬Έμ λλ©μΈμ λν DNS μ‘°νλ₯Ό μλ£νλ μκ°μ λλ€.
- connectStart: λΈλΌμ°μ κ° μλ²μμ μ°κ²° μ€μ μ μμνλ μκ°μ λλ€.
- connectEnd: λΈλΌμ°μ κ° μλ²μμ μ°κ²° μ€μ μ μλ£νλ μκ°μ λλ€. μ¬λ¬ μ§μμμμ CDN μ¬μ© μν₯μ κ³ λ €νμΈμ. μ ꡬμ±λ CDNμ μ μΈκ³ μ¬μ©μμ μ°κ²° μκ°μ ν¬κ² μ€μΌ μ μμ΅λλ€.
- requestStart: λΈλΌμ°μ κ° μλ²μ μμ²μ 보λ΄κΈ° μμνλ μκ°μ λλ€.
- responseStart: λΈλΌμ°μ κ° μλ²λ‘λΆν° μλ΅μ 첫 λ°μ΄νΈλ₯Ό μμ νλ μκ°μ λλ€. μ΄λ μ΅μ΄ λ°μ΄νΈκΉμ§μ μκ°(TTFB) μΈ‘μ μ μμμ μ λλ€.
- responseEnd: λΈλΌμ°μ κ° μλ²λ‘λΆν° μλ΅μ λ§μ§λ§ λ°μ΄νΈλ₯Ό μμ νλ μκ°μ λλ€.
- domLoading: λΈλΌμ°μ κ° HTML λ¬Έμ νμ±μ μμνλ μκ°μ λλ€.
- domInteractive: λΈλΌμ°μ κ° HTML λ¬Έμ νμ±μ μλ£νκ³ DOMμ΄ μ€λΉλ μκ°μ λλ€. μΌλΆ 리μμ€κ° μ¬μ ν λ‘λ μ€μΌ μ μμ§λ§ μ¬μ©μλ νμ΄μ§μ μνΈμμ©ν μ μμ΅λλ€.
- domComplete: λΈλΌμ°μ κ° HTML λ¬Έμ νμ±μ μλ£νκ³ λͺ¨λ 리μμ€(μ΄λ―Έμ§, μ€ν¬λ¦½νΈ λ±) λ‘λκ° μλ£λ μκ°μ λλ€.
- loadEventStart:
loadμ΄λ²€νΈκ° μμλλ μκ°μ λλ€. - loadEventEnd:
loadμ΄λ²€νΈκ° μλ£λλ μκ°μ λλ€. μ΄λ μ’ μ’ νμ΄μ§κ° μμ ν λ‘λλ μμ μΌλ‘ κ°μ£Όλ©λλ€. - duration: λ΄λΉκ²μ΄μ
μ μμλ μ΄ μκ°μ
λλ€.
PerformanceNavigationTimingμμ μ¬μ©ν μ μμ΅λλ€.
μ΅μ νλ₯Ό μν νμ΄μ§ λ‘λ λ©νΈλ¦ λΆμ
νμ΄μ§ λ‘λ λ©νΈλ¦μ μμ§νλ€λ©΄, λ€μ λ¨κ³λ μ΄λ₯Ό λΆμνμ¬ μ΅μ νν μμμ μλ³νλ κ²μ λλ€. λ€μμ λͺ κ°μ§ ν΅μ¬ μ λ΅μ λλ€:
1. λ³λͺ© νμ μλ³
Navigation Timing λ°μ΄ν°λ₯Ό κ²ν νμ¬ νμ΄μ§ λ‘λ νλ‘μΈμ€μμ κ°μ₯ μ€λ 걸리λ λ¨κ³λ₯Ό μ νν μ°ΎμλΌ μ μμ΅λλ€. μλ₯Ό λ€μ΄, domainLookupEnd - domainLookupStartκ° λμΌλ©΄ DNS νμΈ λ¬Έμ λ₯Ό λνλ
λλ€. responseEnd - responseStartκ° λμΌλ©΄ μλ² μλ΅ μκ°μ΄ λ리거λ μ½ν
μΈ ν¬κΈ°κ° ν¬λ€λ κ²μ μμ¬ν©λλ€.
μμ: λ¨λ―Έ μ¬μ©μμ connectEnd - connectStartκ° λΆλ―Έ μ¬μ©μλ³΄λ€ ν¨μ¬ λμ μλ리μ€λ₯Ό μμν΄λ³΄μΈμ. μ΄λ λ¨λ―Έ μ¬μ©μμ λ κ°κΉμ΄ μ μ μ§μ (PoP)μ κ°μ§ CDNμ΄ νμν¨μ λνλΌ μ μμ΅λλ€.
2. μλ² μλ΅ μκ°(TTFB) μ΅μ ν
μ΅μ΄ λ°μ΄νΈκΉμ§μ μκ°(TTFB)μ λΈλΌμ°μ κ° μλ²λ‘λΆν° λ°μ΄ν°μ 첫 λ°μ΄νΈλ₯Ό μμ νλ λ° κ±Έλ¦¬λ μκ°μ μΈ‘μ νλ μ€μν λ©νΈλ¦μ λλ€. λμ TTFBλ μ 체 νμ΄μ§ λ‘λ μκ°μ ν° μν₯μ λ―ΈμΉ μ μμ΅λλ€.
TTFB κ°μ μ λ΅:
- μλ² μΈ‘ μ½λ μ΅μ ν: μλ² μΈ‘ μ½λμ ν¨μ¨μ±μ κ°μ νμ¬ HTML μλ΅ μμ±μ 걸리λ μκ°μ μ€μ λλ€. νλ‘νμΌλ§ λꡬλ₯Ό μ¬μ©νμ¬ λλ¦° 쿼리λ λΉν¨μ¨μ μΈ μκ³ λ¦¬μ¦μ μλ³νμΈμ.
- μ½ν μΈ μ μ‘ λ€νΈμν¬(CDN) μ¬μ©: CDNμ μΉμ¬μ΄νΈ μ½ν μΈ λ₯Ό μΊμνκ³ μ¬μ©μμκ² λ κ°κΉμ΄ μλ²μμ μ 곡νμ¬ μ§μ° μκ°μ μ€μ΄κ³ TTFBλ₯Ό κ°μ ν μ μμ΅λλ€. μ¬λ¬ μ§μμ μ¬μ©μμκ² μλΉμ€λ₯Ό μ 곡νκΈ° μν΄ κ²¬κ³ ν κΈλ‘λ² λ€νΈμν¬λ₯Ό κ°μΆ CDNμ κ³ λ €νμΈμ.
- HTTP μΊμ± νμ±ν: λΈλΌμ°μ κ° μ μ μμ°μ μΊμν μ μλλ‘ μλ²κ° μ μ ν HTTP μΊμ ν€λλ₯Ό 보λ΄λλ‘ κ΅¬μ±νμΈμ. μ΄λ μλ²μ λν μμ² μλ₯Ό ν¬κ² μ€μ΄κ³ νμ νμ΄μ§ λ‘λμ λν TTFBλ₯Ό κ°μ ν μ μμ΅λλ€. λΈλΌμ°μ μΊμ±μ ν¨κ³Όμ μΌλ‘ νμ©νμΈμ.
- λ°μ΄ν°λ² μ΄μ€ 쿼리 μ΅μ ν: λλ¦° λ°μ΄ν°λ² μ΄μ€ 쿼리λ TTFBμ ν° μν₯μ μ€ μ μμ΅λλ€. μΈλ±μ€λ₯Ό μ¬μ©νκ³ , μ 체 ν μ΄λΈ μ€μΊμ νΌνκ³ , μμ£Ό μ‘μΈμ€νλ λ°μ΄ν°λ₯Ό μΊμ±νμ¬ μΏΌλ¦¬λ₯Ό μ΅μ ννμΈμ.
- λ λΉ λ₯Έ μΉ νΈμ€νΈ μ¬μ©: νμ¬ μΉ νΈμ€νΈκ° λ리λ€λ©΄ λ λΉ λ₯Έ νΈμ€νΈλ‘ μ ννλ κ²μ κ³ λ €νμΈμ.
3. 리μμ€ λ‘λ© μ΅μ ν
Resource Timing APIλ μ΄λ―Έμ§, μ€ν¬λ¦½νΈ, μ€νμΌμνΈμ κ°μ κ°λ³ 리μμ€μ λ‘λ© μκ°μ λν μμΈν μ 보λ₯Ό μ 곡ν©λλ€. μ΄ λ°μ΄ν°λ₯Ό μ¬μ©νμ¬ λ‘λνλ λ° μ€λ μκ°μ΄ 걸리λ 리μμ€λ₯Ό μλ³νκ³ μ΅μ ννμΈμ.
리μμ€ λ‘λ© μ΅μ ν μ λ΅:
- μ΄λ―Έμ§ μμΆ: μ΄λ―Έμ§ μ΅μ ν λꡬλ₯Ό μ¬μ©νμ¬ νμ§ μ ν μμ΄ μ΄λ―Έμ§λ₯Ό μμΆνμΈμ. JPEG λ° PNGλ³΄λ€ λ λμ μμΆμ μ 곡νλ WebPμ κ°μ μ΅μ μ΄λ―Έμ§ νμμ μ¬μ©νλ κ²μ κ³ λ €νμΈμ.
<picture>μμλ λ°μν μ΄λ―Έμ§ κΈ°μ μ μ¬μ©νμ¬ μ¬μ©μμ κΈ°κΈ°μ νλ©΄ ν¬κΈ°μ λ°λΌ λ€λ₯Έ μ΄λ―Έμ§ ν΄μλλ₯Ό μ 곡νμΈμ. - CSS λ° μλ°μ€ν¬λ¦½νΈ μ΅μν: CSS λ° μλ°μ€ν¬λ¦½νΈ νμΌμμ λΆνμν λ¬Έμ λ° κ³΅λ°±μ μ κ±°νμ¬ ν¬κΈ°λ₯Ό μ€μ λλ€.
- CSS λ° μλ°μ€ν¬λ¦½νΈ νμΌ λ²λ€λ§: μ¬λ¬ CSS λ° μλ°μ€ν¬λ¦½νΈ νμΌμ λ μ μ μμ νμΌλ‘ κ²°ν©νμ¬ HTTP μμ² μλ₯Ό μ€μ λλ€. λ²λ€λ§μ μν΄ Webpack, Parcel λλ Rollupκ³Ό κ°μ λꡬλ₯Ό μ¬μ©νμΈμ.
- μ€μνμ§ μμ 리μμ€ λ‘λ© μ§μ°: μ§μ° λ‘λ©(lazy loading)κ³Ό κ°μ κΈ°μ μ μ¬μ©νμ¬ μ€μνμ§ μμ 리μμ€(μ: μ€ν¬λ‘€ν΄μΌ 보μ΄λ μ΄λ―Έμ§)λ₯Ό λΉλκΈ°μ μΌλ‘ λ‘λνμΈμ.
- μ μ μμ°μ CDN μ¬μ©: μ μ μμ°(μ΄λ―Έμ§, CSS, μλ°μ€ν¬λ¦½νΈ)μ CDNμμ μ 곡νμ¬ λ‘λ© μκ°μ κ°μ νμΈμ.
- μ€μ 리μμ€ μ°μ μμ μ§μ :
<link rel="preload">λ₯Ό μ¬μ©νμ¬ CSS λ° κΈκΌ΄κ³Ό κ°μ μ€μ 리μμ€μ λ‘λ© μ°μ μμλ₯Ό μ§μ νμ¬ νμ΄μ§μ μ΄κΈ° λ λλ§μ κ°μ νμΈμ.
4. λ λλ§ μ΅μ ν
μΉμ¬μ΄νΈκ° λ λλ§λλ λ°©μμ μ΅μ ννμ¬ μ¬μ©μ κ²½νμ κ°μ νμΈμ. μ£Όμ λ©νΈλ¦μλ First Paint(FP), First Contentful Paint(FCP), Largest Contentful Paint(LCP)κ° ν¬ν¨λ©λλ€.
λ λλ§ μ΅μ ν μ λ΅:
- CSS μ λ¬ μ΅μ ν: λ λλ§ μ°¨λ¨μ λ°©μ§νλ λ°©μμΌλ‘ CSSλ₯Ό μ λ¬νμΈμ. ν¬λ¦¬ν°μ»¬ CSSμ κ°μ κΈ°μ μ μ¬μ©νμ¬ μ΄κΈ° λ·°ν¬νΈμ νμν CSSλ₯Ό μΈλΌμΈμΌλ‘ μ½μ νκ³ λλ¨Έμ§ CSSλ λΉλκΈ°μ μΌλ‘ λ‘λνμΈμ.
- μ₯κΈ° μ€ν μλ°μ€ν¬λ¦½νΈ λ°©μ§: μ₯κΈ° μ€ν μλ°μ€ν¬λ¦½νΈ μμ μ λ μμ μ²ν¬λ‘ λΆν νμ¬ λ©μΈ μ€λ λ μ°¨λ¨μ λ°©μ§νμΈμ.
- μΉ μ컀 μ¬μ©: κ³μ° μ§μ½μ μΈ μμ μ μΉ μμ»€λ‘ μ΄λνμ¬ λ©μΈ μ€λ λ μ°¨λ¨μ λ°©μ§νμΈμ.
- μλ°μ€ν¬λ¦½νΈ μ€ν μ΅μ ν: ν¨μ¨μ μΈ μλ°μ€ν¬λ¦½νΈ μ½λλ₯Ό μ¬μ©νκ³ λΆνμν DOM μ‘°μμ νΌνμΈμ. React, Vue, Angularμ κ°μ κ°μ DOM λΌμ΄λΈλ¬λ¦¬λ DOM μ λ°μ΄νΈλ₯Ό μ΅μ ννλ λ° λμμ΄ λ μ μμ΅λλ€.
- λ μ΄μμ μ΄λ μ€μ΄κΈ°: μκΈ°μΉ μμ λ μ΄μμ μ΄λμ μ΅μννμ¬ μκ°μ μμ μ±μ ν₯μμν€μΈμ. νμ΄μ§κ° λ‘λλ λ μ½ν
μΈ κ° μ΄λνλ κ²μ λ°©μ§νκΈ° μν΄ μ΄λ―Έμ§μ κ΄κ³ 곡κ°μ 미리 ν보νμΈμ.
λμ λ μ΄μμ μ΄λ(CLS)λ©νΈλ¦μ μ¬μ©νμ¬ λ μ΄μμ μ΄λμ΄ λ°μνλ μμμ μλ³νμΈμ. - κΈκΌ΄ μ΅μ ν: μΉ κΈκΌ΄μ 미리 λ‘λνκ³ , 보μ΄μ§ μλ ν
μ€νΈλ₯Ό νΌνκΈ° μν΄
font-display: swap;μ μ¬μ©νκ³ , κΈκΌ΄ νμΌ ν¬κΈ°λ₯Ό μ€μ΄κΈ° μν΄ κΈκΌ΄ μλΈμ μ μ¬μ©νμ¬ ν¨μ¨μ μΌλ‘ μ¬μ©νμΈμ. μ μ ν κ²½μ° μμ€ν κΈκΌ΄ μ¬μ©μ κ³ λ €νμΈμ.
5. μ§μμ μΈ μ±λ₯ λͺ¨λν°λ§
μΉμ¬μ΄νΈ μ±λ₯μ μΌνμ± μμ μ΄ μλλλ€. μλ‘μ΄ λ³λͺ© νμμ΄ λ°μν λ μ΄λ₯Ό μλ³νκ³ ν΄κ²°νκΈ° μν΄ μ§μμ μΌλ‘ μ±λ₯μ λͺ¨λν°λ§νλ κ²μ΄ μ€μν©λλ€. μ±λ₯ λͺ¨λν°λ§ λꡬλ₯Ό μ¬μ©νμ¬ μκ° κ²½κ³Όμ λ°λ₯Έ μ£Όμ λ©νΈλ¦μ μΆμ νκ³ μ±λ₯μ΄ μ νλ λ μλ¦Όμ μ€μ νμΈμ. Google PageSpeed Insights, WebPageTest, Lighthouseμ κ°μ λꡬλ₯Ό μ¬μ©νμ¬ μΉμ¬μ΄νΈ μ±λ₯μ μ κΈ°μ μΌλ‘ κ°μ¬νμΈμ. μ€μ μ¬μ©μμ μ±λ₯ λ°μ΄ν°λ₯Ό μμ§νκΈ° μν΄ μ€μ μ¬μ©μ λͺ¨λν°λ§(RUM) ꡬνμ κ³ λ €νμΈμ.
μ¬μ©μ μ μ λ©νΈλ¦μ μν User Timing API νμ©
User Timing APIλ₯Ό μ¬μ©νλ©΄ μ¬μ©μ μ μ μ±λ₯ λ©νΈλ¦μ μ μνκ³ νΉμ μ½λ μΉμ μ΄ μ€νλλ λ° κ±Έλ¦¬λ μκ°μ μΈ‘μ ν μ μμ΅λλ€. μ΄λ μ¬μ©μ μ μ κ΅¬μ± μμλ νΉμ μ¬μ©μ μνΈμμ©μ μ±λ₯μ μΆμ νλ λ° μ μ©ν μ μμ΅λλ€.
μμ : μ¬μ©μ μ μ λ©νΈλ¦ μΈ‘μ
// μΈ‘μ μμ
performance.mark('start-custom-metric');
// μΌλΆ μμ
μν
// ... μ¬κΈ°μ μ½λ ...
// μΈ‘μ μ’
λ£
performance.mark('end-custom-metric');
// μ§μ μκ° κ³μ°
performance.measure('custom-metric', 'start-custom-metric', 'end-custom-metric');
// μΈ‘μ κ° κ°μ Έμ€κΈ°
const measures = performance.getEntriesByType('measure');
if (measures && measures.length > 0) {
const customMetric = measures[0];
console.log('Custom Metric Duration:', customMetric.duration);
}
κΈλ‘λ² μ±λ₯ ν΅μ°°λ ₯μ μν μ€μ μ¬μ©μ λͺ¨λν°λ§(RUM)
ν©μ± ν μ€νΈ(μ: Lighthouse μ¬μ©)λ κ·μ€ν ν΅μ°°λ ₯μ μ 곡νμ§λ§, μ€μ μ¬μ©μ λͺ¨λν°λ§(RUM)μ λ€μν μμΉμ λ€μν λ€νΈμν¬ μ‘°κ±΄ νμμ μ€μ μ¬μ©μμκ² μΉμ¬μ΄νΈκ° μ΄λ»κ² μλνλμ§μ λν λ μ νν κ·Έλ¦Όμ μ 곡ν©λλ€. RUMμ μ¬μ©μμ λΈλΌμ°μ μμ μ§μ μ±λ₯ λ°μ΄ν°λ₯Ό μμ§νκ³ νμ΄μ§ λ‘λ μκ°, TTFB λ° μ€λ₯μ¨κ³Ό κ°μ μ£Όμ λ©νΈλ¦μ λν ν΅μ°°λ ₯μ μ 곡ν©λλ€. μ§λ¦¬, κΈ°κΈ°, λΈλΌμ°μ λ° λ€νΈμν¬ μ νλ³λ‘ λ°μ΄ν°λ₯Ό λΆν νμ¬ νΉμ μ¬μ©μ μΈκ·Έλ¨ΌνΈμ νΉμ ν μ±λ₯ λ¬Έμ λ₯Ό μλ³ν μ μλ RUM λꡬλ₯Ό μ¬μ©νλ κ²μ κ³ λ €νμΈμ.
κΈλ‘λ² RUM ꡬν μ κ³ λ € μ¬ν:
- λ°μ΄ν° νλΌμ΄λ²μ: μ¬μ©μ λ°μ΄ν°λ₯Ό μμ§ν λ GDPR λ° CCPAμ κ°μ λ°μ΄ν° νλΌμ΄λ²μ κ·μ μ μ€μν΄μΌ ν©λλ€. κ°λ₯ν κ²½μ° λ―Όκ°ν λ°μ΄ν°λ₯Ό μ΅λͺ ννκ±°λ κ°λͺ μ²λ¦¬νμΈμ.
- μνλ§: μμ§λλ λ°μ΄ν°μ μμ μ€μ΄κ³ μ¬μ©μ μ±λ₯μ λ―ΈμΉλ μν₯μ μ΅μννκΈ° μν΄ μνλ§ μ¬μ©μ κ³ λ €νμΈμ.
- μ§λ¦¬μ μΈλΆν: RUM λ°μ΄ν°λ₯Ό μ§λ¦¬μ μ§μλ³λ‘ μΈλΆννμ¬ νΉμ μμΉμ νΉμ ν μ±λ₯ λ¬Έμ λ₯Ό μλ³νμΈμ.
- λ€νΈμν¬ μ‘°κ±΄: λ€μν λ€νΈμν¬ μ ν(μ: 3G, 4G, Wi-Fi)μ κ±ΈμΉ μ±λ₯μ μΆμ νμ¬ λ€νΈμν¬ μ‘°κ±΄μ΄ μ¬μ©μ κ²½νμ λ―ΈμΉλ μν₯μ μ΄ν΄νμΈμ.
μ¬λ°λ₯Έ λꡬ μ ννκΈ°
νμ΄μ§ λ‘λ λ©νΈλ¦μ μμ§νκ³ λΆμνλ λ° λμμ΄ λλ μ¬λ¬ λκ΅¬κ° μμ΅λλ€. λͺ κ°μ§ μΈκΈ° μλ μ΅μ μ λ€μκ³Ό κ°μ΅λλ€:
- Google PageSpeed Insights: μΉμ¬μ΄νΈ μ±λ₯μ λΆμνκ³ κ°μ μ μν κΆμ₯ μ¬νμ μ 곡νλ λ¬΄λ£ λꡬμ λλ€.
- WebPageTest: λ€μν μμΉμ λΈλΌμ°μ μμ μΉμ¬μ΄νΈ μ±λ₯μ ν μ€νΈν μ μλ λ¬΄λ£ λꡬμ λλ€.
- Lighthouse: μΉμ¬μ΄νΈμ μ±λ₯, μ κ·Όμ± λ° SEOλ₯Ό κ°μ¬νλ μ€ν μμ€ λꡬμ λλ€. Chrome DevToolsμ ν΅ν©λμ΄ μμ΅λλ€.
- New Relic: μΉμ¬μ΄νΈ μ±λ₯μ λν μ€μκ° ν΅μ°°λ ₯μ μ 곡νλ ν¬κ΄μ μΈ λͺ¨λν°λ§ νλ«νΌμ λλ€.
- Datadog: μ€μ μ¬μ©μ λͺ¨λν°λ§ λ° ν©μ± ν μ€νΈ κΈ°λ₯μ μ 곡νλ λͺ¨λν°λ§ λ° λΆμ νλ«νΌμ λλ€.
- Sentry: μ±λ₯ λ¬Έμ λ₯Ό μλ³νκ³ μμ νλ λ° λμμ΄ λλ μ€λ₯ μΆμ λ° μ±λ₯ λͺ¨λν°λ§ νλ«νΌμ λλ€.
κ²°λ‘
νλ‘ νΈμλ μ±λ₯ μ΅μ νλ μ§μμ μΈ λͺ¨λν°λ§, λΆμ λ° μ΅μ νκ° νμν μ§μμ μΈ νλ‘μΈμ€μ λλ€. νλ‘ νΈμλ μ±λ₯ API λ° κΈ°ν λꡬλ₯Ό νμ©νμ¬ μΉμ¬μ΄νΈ μ±λ₯μ λν κ·μ€ν ν΅μ°°λ ₯μ μ»κ³ κ°μ ν μμμ μλ³ν μ μμ΅λλ€. μ²μ€μ κΈλ‘λ²ν νΉμ±μ κ³ λ €νκ³ λ€μν μμΉμ λ€μν λ€νΈμν¬ μ‘°κ±΄μ μ¬μ©μλ₯Ό μν΄ μ΅μ ννλ κ²μ μμ§ λ§μΈμ. μ¬μ©μ κ²½νμ μ€μ μ λκ³ μ§μμ μΌλ‘ μ±λ₯μ λͺ¨λν°λ§ν¨μΌλ‘μ¨ μ μΈκ³ μ΄λμ μλ λͺ¨λ μ¬μ©μμκ² λΉ λ₯΄κ³ λ°μμ΄ λΉ λ₯Έ κ²½νμ μ 곡νλ μΉμ¬μ΄νΈλ₯Ό 보μ₯ν μ μμ΅λλ€. μ΄λ¬ν μ λ΅μ ꡬννλ©΄ κΈλ‘λ² μ¬μ©μλ₯Ό μν λ λΉ λ₯΄κ³ , λ λ§€λ ₯μ μ΄λ©°, λ μ±κ³΅μ μΈ μΉμ¬μ΄νΈλ₯Ό λ§λλ λ° λμμ΄ λ κ²μ λλ€.